<template>
  <div>
    <el-tabs v-model="queryParams.state" @tab-change="handleClick">
      <el-tab-pane label="待抢单" name="0"></el-tab-pane>
      <el-tab-pane label="抢单成功" name="1"></el-tab-pane>
    </el-tabs>

    <div>

      <el-pagination class="mt-5" v-model:current-page="queryParams.pageNum" :total="total" background
        @current-change="handleClick" :page-size="queryParams.pageSize" layout="prev, pager, next" />


      <el-table class="mt-5" border :data="matchProducts">
        <el-table-column prop="enterpriseName" label="企业名称" show-overflow-tooltip width="200"
          align="center"></el-table-column>
        <el-table-column prop="applyAmountMin" show-overflow-tooltip width="200" label="期望融资金额" align="center">
          <template #default="scope">
            {{ scope.row.applyAmountMin }} - {{ scope.row.applyAmountMax }}
          </template>
        </el-table-column>
        <el-table-column prop="maturityMin" label="期望融资期限" align="center">
          <template #default="scope">
            {{ scope.row.maturityMin }} - {{ scope.row.maturityMax }}
          </template>
        </el-table-column>
        <el-table-column prop="rateMin" label="期望融资利率" align="center">
          <template #default="scope">
            {{ scope.row.rateMin }}% - {{ scope.row.rateMax }}%
          </template>
        </el-table-column>
        <el-table-column prop="arrivalTimeType" label="期望到账时间" align="center"></el-table-column>
        <el-table-column prop="productName" show-overflow-tooltip width="200" label="金融产品"
          align="center"></el-table-column>
        <el-table-column prop="provinceName" label="企业经营所在省份" align="center"></el-table-column>
        <el-table-column prop="cityName" label="企业经营所在城市" align="center"></el-table-column>
        <el-table-column prop="areaName" label="企业经营所在区县" align="center"></el-table-column>
        <el-table-column prop="applyTime" label="申请时间" width="100" align="center">
          <template #default="scope">
            {{ scope.row.applyTime }}
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" width="120" align="center">
          <template #default="scope">
            <!-- 操作按钮 -->
            <el-button v-if="scope.row.state != 1" type="primary"
              @click="selectedRow = scope.row; dialogVisible = true">抢单</el-button>

            <el-button v-else type="primary" @click="selectedRow = scope.row; dialogVisible = true">查看订单</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-dialog v-model="dialogVisible" title="详细信息" width="800px">
        <el-descriptions :column="2" border>
          <el-descriptions-item label="企业名称">{{ selectedRow.enterpriseName }}</el-descriptions-item>
          <el-descriptions-item label="期望融资金额">{{ selectedRow.applyAmountMin }} - {{ selectedRow.applyAmountMax
          }}万</el-descriptions-item>
          <el-descriptions-item label="期望融资期限">{{ selectedRow.maturityMin }} - {{ selectedRow.maturityMax
          }}月</el-descriptions-item>
          <el-descriptions-item label="期望融资利率">{{ selectedRow.rateMin }}% - {{ selectedRow.rateMax
          }}%</el-descriptions-item>
          <el-descriptions-item label="期望到账时间">{{ selectedRow.arrivalTimeType }}</el-descriptions-item>
          <el-descriptions-item label="金融产品">{{ selectedRow.productName }}</el-descriptions-item>
          <el-descriptions-item label="企业经营所在省份">{{ selectedRow.provinceName }}</el-descriptions-item>
          <el-descriptions-item label="企业经营所在城市">{{ selectedRow.cityName }}</el-descriptions-item>
          <el-descriptions-item label="企业经营所在区县">{{ selectedRow.areaName }}</el-descriptions-item>
          <el-descriptions-item label="申请时间">{{ selectedRow.applyTime }}</el-descriptions-item>
        </el-descriptions>
        <template #footer>
          <div class="dialog-footer" v-if="selectedRow.state != 1">
            <el-button type="primary" @click="confirmGrab">确认抢单</el-button>
            <el-button type="info" @click="dialogVisible = false">取消</el-button>
          </div>
        </template>
      </el-dialog>
    </div>
  </div>
</template>
<script setup lang="ts">
import { getFinanceMatchProduct } from '@/api/matchProduct';
import { addOrder } from '@/api/order';
const matchProducts = ref([]);
const total = ref(0);
const dialogVisible = ref(false);
const selectedRow = ref({});
const queryParams = reactive({
  pageNum: 1,
  pageSize: 10,
  state: "0"
});

onMounted(() => {
  // Fetch initial data or perform setup actions
  handleClick()
})

function handleClick() {
  getFinanceMatchProduct(queryParams).then(response => {
    // Handle the response data
    matchProducts.value = response.rows
    total.value = response.total
  });

}
import { cloneDeep } from 'lodash-es'
function confirmGrab() {
  console.log(selectedRow.value);

  const form = cloneDeep(selectedRow.value);
  delete form.id;
  addOrder(form).then(res => {
    if (res.code == 200) {
      ElMessage.success("抢单成功");
      handleClick();
      dialogVisible.value = false;
    }
  })



}
</script>
<style lang="scss" scoped>
@use '@/assets/styles/tabs_ui.scss';
</style>
